<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="85px">
        <el-form-item label="园所名称：" prop="schoolName">
             <el-input v-model="queryParams.schoolName" @input="handleInput" placeholder="请输入园所名称"  clearable  size="small" />
         </el-form-item>
        <el-form-item label="地区类型" prop="nature">
        <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
          <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="人员类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择人员类型" clearable size="small">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作年限" prop="code">
          <el-input
            v-model="queryParams.code"
            placeholder="请输入工作年限"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="教师姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入教师姓名"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="teacherList">
        <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
        <el-table-column label="园所名称" align="center" prop="schoolName" />
        <el-table-column label="教师工号" align="center" prop="code" />
        <el-table-column label="教师姓名" align="center" prop="name" />
        <el-table-column label="人员类型" align="center" prop="type" :formatter="typeFormat" />
        <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat" />
        <!-- <el-table-column label="出生日期" align="center" prop="birthday" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="学历" align="center" prop="education" :formatter="educationFormat" /> -->
        <!-- <el-table-column label="学位" align="center" prop="degree" :formatter="degreeFormat" /> -->
        <el-table-column label="身份证号" align="center" prop="idcard" />
        <el-table-column label="电话" align="center" prop="phone" />
        <!-- <el-table-column label="邮箱" align="center" prop="email" /> -->
        <el-table-column label="入校日期" align="center" prop="startDate" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" /> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改教师对话框 -->
      <el-dialog title="教师详情" :visible.sync="open" width="800px" append-to-body>
  <el-form ref="elForm" :model="basicInfor" size="medium" label-width="100px">
    <el-form-item label="教师姓名" prop="name">
      <el-input v-model="basicInfor.name" :disabled="true" clearable></el-input>
    </el-form-item>
    <el-form-item label="教师工号" prop="code">
      <el-input v-model="basicInfor.code" :disabled="true" clearable></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <!-- <el-input v-model="basicInfor.sex" :disabled="true" clearable></el-input> -->
      <el-input v-model="formattedSex" :disabled="true" clearable></el-input>
    </el-form-item>
    <el-form-item label="入校日期" prop="startDate">
      <el-input v-model="basicInfor.startDate" :disabled="true" clearable></el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="idcard">
      <el-input v-model="basicInfor.idcard" :disabled="true" clearable></el-input>
    </el-form-item>
    <el-form-item label="学历" prop="education">
      <el-input v-model="basicInfor.education" :disabled="true" clearable></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="basicInfor.phone" :disabled="true" clearable></el-input>
    </el-form-item>
  </el-form>

  <!-- 其余部分不变 -->

  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="cancel">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

    </div>
  </template>

  <script>
  import {regionList,teacherID}from "@/api/qu/teachers";

  export default {
    name: "teachersMx",
    data() {
      return {
        schoolNatureOptions:[],
        // 总条数
        total: 0,
        // 部门树选项
        deptOptions: [],
        // 教师表格数据
        teacherList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 类型字典
        typeOptions: [],
        // 性别字典
        sexOptions: [],
        // 学历字典
        educationOptions: [],
        // 学位字典
        degreeOptions: [],
        // 状态字典
        statusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          code: null,
          name: null,
          type: null,
          sex: null,
          education: null,
          degree: null,
          idcard: null,
          status: null
        },
        basicInfor:{
          sex:''
        }


        }
    },
    computed: {
  formattedSex() {
    return this.basicInfor.sex === "0" ? "男" : this.basicInfor.sex === "1" ? "女" : "未知";
  },
},
    created() {
      this.getList();
      this.getDicts("teacher_type").then(response => {
        this.typeOptions = response.data;
      });
      this.getDicts("sys_user_sex").then(response => {
        this.sexOptions = response.data;
      });
      this.getDicts("base_education").then(response => {
        this.educationOptions = response.data;
      });
      this.getDicts("base_degree").then(response => {
        this.degreeOptions = response.data;
      });
      this.getDicts("common_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
        });
    },
    methods: {
      /** 查询教师列表 */
      async getList() {
        this.loading = true;
         try {
            const obj ={
                schoolName:this.queryParams.schoolName,
                nature:this.queryParams.nature,
                type:this.queryParams.type,
                name:this.queryParams.name,
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
                // schoolName:this.queryParams.title,
            }
           const data = await regionList(obj)
           this.teacherList = data.rows;
           this.total = data.total;
           this.loading = false;
         } catch (error) {
            console.log(error);
         }

      },

      // 序号
      customeIndex(index){
         return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
      },
      // 类型字典翻译
      typeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.type);
      },
      // 性别字典翻译
      sexFormat(row, column) {
        return this.selectDictLabel(this.sexOptions, row.sex);
      },
      // 学历字典翻译
      educationFormat(row, column) {
        return this.selectDictLabel(this.educationOptions, row.education);
      },
      // 学位字典翻译
      degreeFormat(row, column) {
        return this.selectDictLabel(this.degreeOptions, row.degree);
      },
      // 状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.status);
      },
      handleInput(val){
        let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g // 特殊字符正则
        let regkg = /[ ]/g// 空格正则
        this.queryParams.schoolName = val.replace(regtszf, '').replace(regkg, '')
         },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleView(val){
        this.open=true;
        this.getTeacherID(val)
        // this.basicInfor = { ...val }; // 使用对象的解构赋值，确保不修改原始数据
      },
      async getTeacherID(val){
        try {
           const {data} = await teacherID(val.id);
           this.basicInfor=data;
           console.log("111",this.basicInfor);
        } catch (error) {
            console.log(error);
        }
      },

    }
  };
  </script>
  <style lang="scss" scoped>
     .teacherBox{
            padding-left: 20px;
            height: 400px;
            overflow-y:auto ;
     }
     ::-webkit-scrollbar {
        width: 10px;
     background-color:#fff;
}

  /* 滚动条上的滚动滑块 */
  ::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: #ddd;
  }
  </style>
